// 导入
import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// // 声明你要渲染的页面
// const h1 = <h1 key="1">Hello React</h1>;

// // console.log(typeof h1, h1);

// const p = <p key="2">月薪过万</p>;

// const p2 = (
//   <p key="3" id="123">
//     月薪过万
//   </p>
// );

// const p3 = (
//   <p key="4" id="123" className="title">
//     月薪过万
//   </p>
// );
let name = 'Jack';
const div2 = (
  <>
    <div key="5">
      <h2>{name}</h2>
      <h2>购物列表</h2>
      <br />
      <ul>
        <li>华为</li>
        <li>iPhone</li>
      </ul>
    </div>
    <div>xxx</div>
  </>
);

// 声明你要渲染的页面
// const h1 = <h1 key="1">Hello React</h1>;
// 对应解析后执行的代码
const h1 = React.createElement('h1', { key: 1, id: 123 }, '月薪过万');
const p = React.createElement(
  'p',
  { key: 2, id: 123, className: 'title' },
  '月薪过万'
);

const div = React.createElement(
  'div',
  { key: 3 },
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

// 渲染
root.render([h1, p, div, div2]);
